<script setup lang="ts">
import {ref} from "vue";

const emit = defineEmits(['success'])
const props = defineProps({
    indexSel: {
        type: Number,
        default: 0
    },
    group: {
        type: Array,
        default: () => []
    }

})
const _indexSel = ref(props.indexSel >= props.group.length ? 0 : props.indexSel)

function resetIndex(index) {
    _indexSel.value = index
    emit('success', "当前转换后的index：" + index)
}

defineExpose({resetIndex})
</script>

<template>
    <div style="display: flex">
        <div @click="()=>{_indexSel = index}" v-for="(item,index) in group" class="clip-class" :key="index"
             :class="{'clip-class-max':_indexSel==index,'clip-left-right':![0,group.length-1].includes(index),'clip-right':[0].includes(index),'clip-left':[group.length-1].includes(index)}">
            {{ _indexSel == index ? item['label'] : item['short'] }}
        </div>
    </div>
</template>

<style scoped lang="scss">
$_space: 16px;
$radius: 10px;
.clip-class-max {
    color: white;
    width: 300px !important;
    background: linear-gradient(to right, #0670ff, #5ec4fe);
}

.clip-class {
    display: inline-block;
    width: 160px;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    font-weight: bold;
    transition: width 0.6s ease; /* 添加过渡效果 */
    background-color: #e1ebfb;
    margin-left: -12px;

    &:first-child {
        margin-left: 0;
    }
}

.clip-left {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
    clip-path: polygon(0.00% 0.00%, 100% 0.00%, 100% 50%, 100% 100%, 100% 100%, 0.00% 100%, 0% 100%, $_space 50%);
}

.clip-right {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
    clip-path: polygon(0.00% 0.00%, calc(100% - $_space) 0.00%, 100% 50%, calc(100% - $_space) 100%, calc(100% - $_space) 100%, 0.00% 100%, 0% 100%, 0% 0%);
}

.clip-left-right {
    clip-path: polygon(0.00% 0.00%, calc(100% - $_space) 0.00%, 100% 50%, calc(100% - $_space) 100%, calc(100% - $_space) 100%, 0.00% 100%, 0% 100%, $_space 50%);
}
</style>